<template>
  <div class="c-bg-sgray">
    <div class="c-ph24 c-pt20">
      <div v-for="(item, index) in dataInfo" :key="index" class="c-bg-white c-ph20 c-pb20 c-fs20 c-fc-xblack c-br10" :class="index < dataInfo.length-1 ? 'c-mb20' : ''">
        <div class="c-flex-row c-justify-end">
          <p class="c-ph10 c-pv4 c-br-bl8 c-br-br8 c-fc-white c-fs18" :class="statusVal(item, 4)">{{statusVal(item, 3)}}</p>
        </div>
        <p class="c-fs26 c-pb30 c-bd-b1-f6" v-if="comeFrom == 0">【{{item.role == 1 ? '正会长' : '副会长'}}】{{item.name}}</p>
        <div class="c-fs26 c-pb30 c-bd-b1-f6" v-else-if="comeFrom == 4">
          {{item.area}}
          <count-line-height :item = "item" v-if="item.auditStatus < 1" :source="1"></count-line-height>
        </div>
        <div class="c-fs26 c-pb30 c-bd-b1-f6" v-else>
          <span v-if="comeFrom == 1">【{{item.regionType == 1 ? '省代理' : item.regionType == 2 ? '市代理' : '区代理'}}】</span>{{comeFrom == 2 ? item.area : item.regionType == 1 ? item.areaData.provinceName : item.regionType == 2 ? item.areaData.cityName : item.areaData.areaName}}
          <count-line-height :item = "item" v-if="comeFrom == 2 && item.auditStatus < 1" :source="1"></count-line-height>
        </div>
        <p class="c-fc-sblack c-mt20" v-if="item.applyAt">申请时间：{{item.applyAt}}</p>
        <p class="c-fc-sblack c-mt20" v-if="item.auditStatus == -2 && comeFrom == 4 && item.source == 2">取消时间：{{item.auditTime}}</p>
        <p class="c-fc-sblack c-mt20" v-if="comeFrom == 4 && item.source == 2">来源：手动添加</p>
        <p class="c-fc-sblack c-mt20" v-else-if="item.auditTime">{{statusMap[item.auditStatus]}}时间：{{item.auditTime}}</p>
      </div>
    </div>
    <div class="c-fc-gray c-fs20 c-textAlign-c c-pv20" v-if="(isLoading || loadingStatus == 'NO_MORE_DATA') && !noneShow">{{loadingStatus == 'NO_MORE_DATA' ? '- 没有更多了 -' : '加载中...'}}</div>
    <!-- 暂无数据 -->
    <loading-status-tem :noDataText="'暂无数据'" :noData="!isLoading && dataInfo.length <= 0"></loading-status-tem>
    <div v-if="comeFrom == 4" @click="goApply" class="c-pf c-p-r24 c-p-b80 c-ww80 c-hh80 theme-bg c-box-shadow7 c-fs20 c-fc-white c-flex-row c-justify-center c-aligni-center c-brp50">
      <span class="c-textAlign-c">申请</span>
    </div>
  </div>
</template>
<script>
import { utilJs } from "@/utils/common.js";
import validateVipType from './validateVipType'
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import CountLineHeight from "@/components/templates/countLineHeight.vue"
let pageIndex = 1
export default {
  name: 'applyRecords',
  components: {
    loadingStatusTem,
    CountLineHeight
  },
  mixins: [validateVipType],
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : 'mb5_default',
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      loadingStatus: "NO_MORE_DATA", //显示加载更多LOAD_MORE 加载中 LOADING 没有更多 NO_MORE_DATA
      isLoading: false,
      dataInfo: [],
      noneShow: false,
      limit: 20,
      statusColor: [ // -2 后台系统取消身份,-1审核失败，1是审核中，2审核通过，
        {status: 1, color: '#4893F8', bgColor: 'rgba(72,147,248,0.1)', value: '审核中', css: 'theme-bg'},
        {status: -1, color: '#FC583D', bgColor: 'rgba(252,88,61,0.1)', value: '已驳回', css: 'statusFailed'},
        {status: 2, color: '#45B930', bgColor: 'rgba(69,185,48,0.1)', value: '已通过', css: 'statusPassed'},
        {status: -2, color: '#FC583D', bgColor: 'rgba(252,88,61,0.1)', value: '已取消', css: 'statusFailed'},
      ],
      statusMap: {
        '-2': '取消',
        '-1': '驳回',
        1: '审核',
        2: '通过'
      },
      comeFrom: 0, //0 新版区域代理(胜者定制) 1徐鸿定制 2: 旧版区域代理 4: 链动2+1
    }
  },
  computed: {
    statusVal() {
      return function (data, type) {
        var findColor = this.statusColor.find(i => i.status == data.auditStatus)
        switch (type) {
          case 1: // 字体颜色
            return findColor ? findColor.color : '#333'
          case 2: // 背景色
            return findColor ? findColor.bgColor : '#fff'
          case 3: // 状态文字
            return findColor ? findColor.value : '未知'
          case 4: // 样式
            return findColor ? findColor.css : ''
          default:
            return ''
        }
      }
    },
  },
  methods: {
    goApply() {
      this.$routerGo(this, "push", {
        path: '/homePage/newAreaUser/apply',
        query: {
          comeFrom: 4,
        }
      })
    },
    initData() {
      if (this.isLoading) {
        return;
      }
      this.isLoading = true;
      var $this = this;
      let url = this.comeFrom == 1 ? 'xhAreaUser/getWxAreaUserCheckList' : this.comeFrom == 0 ? 'areaUser/areaUserPage' : this.comeFrom == 4 ? 'chainUser/myChainCityApply' : 'areaAgent/myAreaAgentApplication'
      utilJs.getMethod(global.apiurl + `${url}?page=${pageIndex}&limit=${this.limit}`, res => {
        if (pageIndex != res.current_page) {
          pageIndex = res.current_page
        }
        if (pageIndex == 1) {
          $this.dataInfo = res.data;
        } else {
          $this.dataInfo = [...$this.dataInfo, ...res.data];
        }
        if ($this.dataInfo.length == 0) {
          $this.noneShow = true;
          $this.loadingStatus = "NO_MORE_DATA";
        } else {
          $this.noneShow = false;
        }
        if (!res.next_page_url) {
          $this.loadingStatus = "NO_MORE_DATA";
        } else {
          $this.loadingStatus = 'LOAD_MORE';
          pageIndex++
        }
        $this.isLoading = false;
      });
    },
    //分享
    wechatShare: function () {
      let title = '申请进度';
        // let shareImg = window.localStorage.getItem("shareLogo");
      let shareImg = 'https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/common/provider.png';
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?comeFrom=${this.comeFrom}&refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = "点击查看详情";
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc, function () { }, true);
    },
      //手机端分享
    appShare: function () {
      utilJs.appShareTrue("", "", "", "");
    },
    windowScrollFunction: function () {
      let that = this;
      utilJs.handleLoading(function () {
        if (that.loadingStatus == 'LOAD_MORE') {
          that.initData()
        }
      });
    }
  },
  activated() {
    setDocumentTitle('申请进度');// eslint-disable-line
    this.comeFrom = this.$route.query.comeFrom;
    this.isLoading = false;
    this.loadingStatus = 'LOAD_MORE';
    this.dataInfo = [];
    pageIndex = 1
    if (this.comeFrom == 4) {
      this.initData()
    } else {
      this.isAgentVipType().then(res => { // 验证服务商身份，不是的话跳转回个人中心
        this.initData();
      })
    }
    window.addEventListener('scroll', this.windowScrollFunction);
    this.wechatShare();
  },
  deactivated() {
    this.loadingStatus = 'NO_MORE_DATA';
    this.dataInfo = [];
    window.removeEventListener('scroll', this.windowScrollFunction);
  }
}
</script>
<style scoped>
.statusFailed {
  background:linear-gradient(90deg,rgba(255,0,0,1) 0%,rgba(255,83,85,1) 100%);
}
.statusPassed{
  background:linear-gradient(90deg,rgba(69,185,48,1) 0%,rgba(102,204,51,1) 100%);
}
</style>